<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>桑冬伟的个人简历</title>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

		<style type="text/css">
			.jumbotron {
				margin-bottom: 10px;
			}

			.container {
				margin-top: 30px;
			}

			.ima-responsive {
				height: 210px;
				width: 210px;

			}

			.glyphicon {
				margin-right: 20px;
			}

			.imgstyle {
				height: 460px;
				height: 700px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!--左边部分-->
				<div class="col-md-3">
					<! --个人信息面板-->
						<div class="panel panel-default">
							<div class="panel-heading">个人信息</div>
							<div class="panel-body">
								<img alt="pic" class="ima-responsive img-rounded img-thumbnail" src="../sdw/img/头像.jpg"
									width="210px" height="210px" />
								<span class="glyphicon glyphicon-user" title="姓名"><abbr
										title="PostalCode">姓名：</abbr>桑冬伟</span><br />
								<address>
									<span class="glyphicon glyphicon-tag" title="学号"><abbr
											title="PostalCode">学号：</abbr><kbd>2020105110222</kbd></span><br />
									<span class="glyphicon glyphicon-star" title="联系电话"><abbr
											title="Phone">联系电话：</abbr>18055736423</span><br />
									<span class="glyphicon glyphicon-envelope" title="电子邮箱"><a
											href="2822269860@qq.com">2508701327@qq.com</a></span>
								</address>
							</div>
						</div>
						<!--个人技能面板-->
						<div class="panel panel-info">
							<div class="panel-heading">个人技能</div>
							<div class="panel-body">
								<div class="row">
									<div class="col-md-3">
										<span class="text-muted">HTML</span>
									</div>
									<div class="col-md-9">
										<div class="progress">
											<div class="progress-bar progress-bar-success progress-bar-striped active"
												style="width: 70%; "></div>
										</div>
									</div>



									<div class="col-md-3">
										<span class="text-muted">CSS</span>
									</div>
									<div class="col-md-9">
										<div class="progress">
											<div class="progress-bar progress-bar-warning progress-bar-striped active"
												style="width: 75%; "></div>
										</div>
									</div>

									<div class="col-md-3">
										<span class="text-muted">JQurey</span>
									</div>
									<div class="col-md-9">
										<div class="progress">
											<div class="progress-bar progress-bar-info progress-bar-striped active"
												style="width: 80%; "></div>
										</div>
									</div>

									<div class="col-md-3">
										<span class="text-muted">JS</span>
									</div>
									<div class="col-md-9">
										<div class="progress">
											<div class="progress-bar progress-bar-danger progress-bar-striped active"
												style="width: 85%; "></div>
										</div>
									</div>

								</div>
							</div>
						</div>
						<div class="panel panel-primary">
							<div class="panel-heading">联系我</div>
							<div class="panel-body">
								<div class="form-horizontal">
									<div class="form-group">
										<label class="col-sm-4 control-label" for="inputemail">电子邮箱</label>
										<div class="col-sm-8">
											<input id="inputemail" type="email" class="form-control"
												placeholder="email" />
										</div>
									</div>
									<div class="form-group">
										<label class="col-sm-4 control-label" for="inputname">姓名</label>
										<div class="col-sm-8">
											<input id="inputname" type="email" class="form-control"
												placeholder="name" />
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-offset-4col-sm-8">
											<button type="submit" class="btn btn-default pull-right">发送
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>


						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenul"
								data-toggle="dropdown">
								个人技能
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" aria-labelledby="dropdown-Menul">
								<li><a href="#">Java</a></li>
								<li><a href="#">JS</a></li>
								<li><a href="#">HTML</a></li>
								<li><a href="#">CSS</li>
							</ul>
						</div>

				</div>
				<!--右边部分-->
				<div class="col-md-9">
					<div class="jumbotron">
						<p class="text-left small">
							<a href="https://www.chzc.edu.cn/">
								滁州职业技术学院(CHUZHOUPOLYTECHNIC)坐落于安徽省滁州市，是安徽省属全日制公立普通高等职业院校,教育部优质专科学校建设单位<br />
								安徽省示范性高职院校，安徽省首批“地方技能型高水平大学”建设单位。<br />
								学院成立于2002年7月，由原滁州建筑工程学校、安徽滁州技工学校、滁州市商业干部学校、滁州市供销干部学校、滁州市粮食成人中专学校<br />
								滁州市财税干部学校等6所学校合并组建而成。2009年2月，安徽省人民政府批准在滁州职业技术学院设立安徽滁州技师学院<br />
							</a>
						</p>
					</div>

					<div class="panel-group" id="accordion">
						<div class="panel panel-warning">
							<div class="panel-heading">
								<div class-panel-title”>项目展示</div>
							</div>
							<div class="panel-body">
								<div class="panel-body">
									<div class="col-sm-4">
										<div class="thumbnail">
											<img class="imgstyle" src="img/登录系统.png" alt="Canvas">
											<div class="caption text-center">
												<p><a href="https://wwww.canvasflip.com/">登录系统</a></P>
											</div>
										</div>
									</div>
									<div class="col-sm-4">
										<div class="thumbnail">
											<img class="imgstyle" src="img/管理系统.png" alt=litta">
											<div class="caption text-center">
												<p><a href="http://litta.com/">管理系统</a> </p>
											</div>
										</div>
									</div>
									<div class="col-sm-4 ">
										<div class="thumbnail">
											<img class="imgstyle" src="img/调查问卷.png" alt="vipp">
											<div class="caption text-center">
												<p><a href="https://www.vipp.com/">调查问卷</a></p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="panel panel-danger">
							<div class="panel-heading">
								<div class="panel-title">工作经验</div>
							</div>
							<ul class="list-group">
								<li class="list-group-item ">
									<div class="row">
										<div class="col-sm-4">时间</div>
										<div class="col-sm-4">单位</div>
										<div class="col-sm-4">职业</div>
									</div>
								</li>

								<li class="list-group-item ">
									<div class="row">
										<div class="col-sm-4">2020</div>
										<div class="col-sm-4">上海</div>
										<div class="col-sm-4">普工</div>
									</div>
								</li>

								<li class="list-group-item ">
									<div class="row">
										<div class="col-sm-4">2021</div>
										<div class="col-sm-4">安徽省滁州市</div>
										<div class="col-sm-4">外卖员</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="panel panel-info">
							<div class="panel-heading">
								<div class="panel-title">教育背景</div>
							</div>
							<div class="panel-body">
								<table class="table table-striped">
									<tr>
										<th>时间</th>
										<th>学校</th>
										<th>教育经历</th>
									</tr>
									<th>2014-9~2017-7</th>
									<th>桃园矿小学</th>
									<th>初中</th>
									</tr>
									<th>2017-9~2020-6</th>
									<th>芦岭矿中学</th>
									<th>高中</th>
									</tr>
									<th>2020-10</th>
									<th>滁州职业技术学院</th>
									<th>软件技术</th>
									</tr>
								</table>

							</div>
						</div>
					</div>

					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<a class="navbar-brand" href="#">个人简介</a>
								<button class="navbar-toggle" type="button" data-toggle="collapse"
									data-target="#collapsel">
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
							<div class="collapse navbar-collapse" id="collapsel">
								<p class="navbar-text">
									本人做事认真，诚实负责，有一定的团队意识，动手能力强，本人性格热情、有活力、真诚。工作认真负责、思想活跃。有较强实践动手能力和团队协作精神，能迅速的适应各种环境，并融于其中。
								</p>
							</div>
						</div>
					</nav>


					<nav class="navbar navbar-default" role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse"
								data-target="#example-navbar-collapse">
								<span class="sr-only">切换导航</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand" href="#">响应式导航栏</a>
						</div>
						<div class="collapse navbar-collapse" id="example-navbar-collapse">
							<ul class="nav navbar-nav">
								<li class="active"><a href="#">iOS</a></li>
								<li><a href="#">fgghh</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										Java <b class="caret"></b>
									</a>
									<ul class="dropdown-menu">
										<li><a href="#">vgghhr</a></li>
										<li><a href="#">dg</a></li>
										<li><a href="#">sfg</a></li>
										<li class="divider"></li>
										<li><a href="#">分离的链接</a></li>
										<li class="divider"></li>
										<li><a href="#">另一个分离的链接</a></li>
									</ul>
								</li>
							</ul>
						</div>
					</nav>


				</div>
			</div>
		</div>
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
		</script>
	</body>
</html>
